<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class与Style绑定</title>

    <script src="./../vue/vue.js"></script>

    <style>

        .test-div{
            width: 200px;
            height: 50px;
            border: 1px solid red;
        }

        .divA{
            width: 200px;
            height: 50px;
            background-color: skyblue;
        }

    </style>
</head>
<body>

    <!-- 
        v-bind:class 时除了可以直接传入字符串之外，还可以传入 对象和数组
            1、字符串
            2、对象
            3、数组

        v-bind:style 
            1、对象
            2、对象数组
            

     -->


    <div id="app">
        <!-- 绑定class -->
        <div>
            <!-- 直接绑定字符串 这种方式 class类名 在vm中，不容易发现 和维护-->
            <div :class="strClass"></div>
            <!-- 绑定 类 -->
            <div :class="{divA:divActive}"></div>
            <!-- 绑定数组，绑定数组中的元素如果是字符串，则直接从样式中查找，如果是引用，则在data中查到对应的值，再到样式标中查找 -->
            <div :class="['divA','test-div']"></div>
            
        </div>

        <!-- 内联样式绑定 -->
        <div>
            <div :style="{width: '200px',height: '200px',backgroundColor: bgColor}"></div>

            <!-- 更加推荐使用这种方法，直接绑定对象 -->
            <div :style="divStyle"></div>
            <!--  -->
            <div :style="[divStyle,borderStyle]"></div>
        </div>
    </div>
    
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                strClass: "test-div",
                firstName: "TOM",
                divActive: true,
                divStyle:{
                    width: "200px",
                    height: "200px",
                    backgroundColor: "blue"
                },
                borderStyle:{
                    border: "5px solid black",
                    boxSizing: "border-box"
                },
                bgColor: "pink"
            },
            computed:{
                computedParams: {
                    set: function(value){
                        this.firstName = value
                    },
                    get: function(){
                        return this.firstName
                    }
                }
            },
            watch: {
                params: function(newValue,oldValue){

                }
            },
            methods: {
                
            },
        })
    </script>
</body>
</html>